<template>
  <el-dialog v-model="visible" title="上传" @closed="onReset" :close-on-click-modal="false">
    <el-upload
      class="upload-demo"
      drag
      action="http://api.huojisuan.com/unit/WatchUser/subForm"
      accept=".xlsx,.xls"
      limit="1"
      :headers="uploadHeader"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">拖拽文件到此处或<em>点击上传</em></div>
    </el-upload>
  </el-dialog>
</template>

<script lang="ts" setup>
import { UploadFilled } from '@element-plus/icons-vue'
import { reactive, ref, computed } from 'vue'
import store from '@/store'
import { ElMessage, UploadProps } from 'element-plus'

const emit = defineEmits(['refresh'])
const visible = ref()
const open = (data?) => {
  visible.value = true
}

const uploadHeader = computed(() => {
  return {
    'A-Token': store.state.user.a_token,
    'U-Token': store.state.user.u_token
  }
})

const handleExceed = () => {
  ElMessage.warning('当前限制上传1个，请删除原文件')
}

const handleSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  if (response.code !== 200) return ElMessage.error('上传失败请重试')
  if (response.code === 200) {
    visible.value = false


    
    emit('refresh')
    ElMessage.success(response.msg)
  }
}
defineExpose({ open })
</script>

<style lang="scss" scoped></style>
